<template>
  <el-container>
    <vue-particles
      color="#ccc"
      :particleOpacity="0.7"
      :particlesNumber="200"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.6"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login-box">
      <h1>管理系统</h1>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="" prop="username">
          <el-input placeholder="用户名" v-model="ruleForm.username">
            <icon slot="prefix" name="user"></icon>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="login">
            <icon slot="prefix" name="key"></icon>
          </el-input>
        </el-form-item>
        <el-button type="primary" size="medium" @click="login">登陆</el-button>
      </el-form>
    </div>
  </el-container>
</template>
<script>
import { mapActions } from "vuex";
import { MD5 } from "crypto-js";
import Icon from "vue-awesome/components/Icon";

export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 4,
            max: 10,
            message: "用户名长度在 4 到 8 个字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "密码长度在 3 到 20 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapActions(["LOGIN_ACTION"]),
    async login() {
      this.$refs["ruleForm"].validate(async valid => {
        if (valid) {
          let { username, password } = this.ruleForm;
          password = MD5(password + username.slice(0, 4), "hex").toString();
          let result = await this.LOGIN_ACTION({ username, password });
          if (result.code === 1) {
            this.$router.push("/");
          }
        }
      });
    }
  },
  created() {
    sessionStorage.clear();
  },
  components: {
    Icon
  }
};
</script>
<style lang="scss" scoped>
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.el-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    transform: translateY(-15%);
    h1 {
      font-size: 1.4rem;
      font-weight: 500;
    }
    .el-form {
      width: 20rem;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
